{% extends 'admin/base.html' %}
{% load static %}
{% block title %}dashboard{% endblock %}
{% block css %}
<!-- Custom styles for this page -->
<link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet">
<style>
    td {
        width: 25%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #252b3a;
    }

    table {
        width: 100%;
        table-layout: fixed;
    }
</style>
{% endblock %}
{% block pagecontent %}
<!-- Page Heading -->
<div class="d-flex justify-content-sm-between mb-2" id="page-heading">
    <h1 class="h4 mb-0 text-gray-800">订单管理</h1>
    <div>
        <a href="javascript:void (0)" class="d-none d-sm-inline-block btn btn-sm btn-dark shadow-sm" data-toggle="modal"
            data-target="#uploadFile"><i class="fas fa-upload fa-sm text-white-50"></i> 导入Excel数据</a>
        <button class="d-none d-sm-inline-block btn btn-sm btn-dark shadow-sm"
            onclick="download_file('downloadOrderTemplate')"><i class="fas fa-download fa-sm text-white-50"></i>
            下载Excel模板
        </button>
    </div>
</div>

<!-- Content Row -->
<div class="d-flex justify-content-sm-end mb-0">
    <!-- Selected running state -->
    <div class="d-inline-flex">
        <div class="p-1 order-4">
            <div class="input-group">
                <input type="text" class="form-control" aria-label="Text input with search by criteria"
                    placeholder="请输入搜索内容" id="filter_condition">
                <div class="input-group-append mb-3">
                    <button class="btn btn-dark" type="button" onclick="filter_orders()">
                        <i class="fa fa-search" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="p-1 order-4">
            <button type="button" class="btn btn-outline-secondary" onclick="refresh_table()">
                <span class="fas fa-redo" aria-hidden="true"></span>
            </button>
        </div>
    </div>
</div>
<!-- DataTales Example -->
<div class="card shadow mb-4">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" id="ordersTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>货号</th>
                        <th>规格</th>
                        <th>产品类型</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="modal fade" id="uploadFile" tabindex="-1" role="dialog" data-backdrop="static"
    aria-labelledby="uploadFileLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadFileLabel">导入数据</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="input-group">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="input_upload_file">
                        <label class="custom-file-label" for="input_upload_file">选择文件</label>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="btn_upload_file" onclick="upload_file('orders')">上传
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="editOrder" tabindex="-1" role="dialog" data-backdrop="static"
    aria-labelledby="editOrderLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editOrderLabel">编辑订货信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="input-group mb-3 col-md-auto" style="display: none">
                        <div class="input-group-prepend" style="width: 25%">
                            <label class="input-group-text" style="width: 100%" for="edit_order_id"><span
                                    style="color: red">*</span>产品id</label>
                        </div>
                        <input type="text" class="form-control" id="edit_order_id">
                    </div>
                </div>
                <div class="row">
                    <div class="input-group mb-3 col-md-auto">
                        <div class="input-group-prepend" style="width: 25%">
                            <label class="input-group-text" style="width: 100%" for="edit_product_item_num">产品货号</label>
                        </div>
                        <input type="text" class="form-control" id="edit_product_item_num" disabled>
                    </div>
                </div>
                <div class="row">
                    <div class="input-group mb-3 col-md-auto">
                        <div class="input-group-prepend" style="width: 25%">
                            <label class="input-group-text" style="width: 100%"
                                for="edit_product_sub_item_num">子货号</label>
                        </div>
                        <input type="text" class="form-control" id="edit_product_sub_item_num" disabled>
                    </div>
                </div>
                <div class="row">
                    <div class="input-group mb-3 col-md-auto">
                        <div class="input-group-prepend" style="width: 25%">
                            <label class="input-group-text" style="width: 100%" for="edit_order_flavor">规格</label>
                        </div>
                        <input type="text" class="form-control" id="edit_order_flavor" required>
                    </div>
                </div>
                <div class="row">
                    <div class="input-group mb-3 col-md-auto">
                        <div class="input-group-prepend" style="width: 25%">
                            <label class="input-group-text" style="width: 100%" for="edit_order_unit">单位</label>
                        </div>
                        <input type="text" class="form-control" id="edit_order_unit" required>
                    </div>
                </div>
                <div class="row">
                    <div class="input-group mb-3 col-md-auto">
                        <div class="input-group-prepend" style="width: 25%">
                            <label class="input-group-text" style="width: 100%" for="edit_product_type">产品类型</label>
                        </div>
                        <input type="text" class="form-control" id="edit_product_type" required>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="edit_order()">保存
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="deleteOrder" tabindex="-1" role="dialog" data-backdrop="static"
    aria-labelledby="deleteOrderLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteOrderLabel">删除订货信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-sm table-striped">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col">id</th>
                            <th scope="col">货号</th>
                            <th scope="col">产品类型</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="table-info" id="delete_order_id"></td>
                            <td class="table-info" id="delete_product_item_num"></td>
                            <td class="table-info" id="delete_product_type"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="delete_order()">是
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">否</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
<script src="{% static 'vendor/jquery/jquery.fileDownload.js' %}"></script>

<!-- Page level custom scripts -->
<script src="{% static 'js/admin/orders.js' %}"></script>
<script type="text/javascript">
    $(function () {
        $('#collapseProducts').collapse('show')
    });
    $('a[href="/console/orders"]').addClass('active');

    $("#input_upload_file").change(function () {
        let fieldVal = $(this).val();
        // Change the node's value by removing the fake path (Chrome)
        fieldVal = fieldVal.replace("C:\\fakepath\\", "");
        if (fieldVal !== undefined || fieldVal !== "") {
            $(this).next(".custom-file-label").attr('data-content', fieldVal);
            $(this).next(".custom-file-label").text(fieldVal);
        } else {
            $(this).next(".custom-file-label").attr('data-content', "选择文件");
            $(this).next(".custom-file-label").text("选择文件");
        }
    });
</script>
{% endblock %}